@charset "utf-8";
@import "./variable";/*引入配置*/
@mixin font_size($size){/*通过该函数设置字体大小，后期方便统一管理；*/
  @include font-dpr($size);
}
@mixin font_color($color){/*通过该函数设置字体颜色，后期方便统一管理；*/
	color:$color;
  [data-theme="theme1"] & {
    color:$font-color-theme1;
  }
  [data-theme="theme2"] & {
    color:$font-color-theme2;
  }
}
@mixin element_color($color){/*通过该函数设置字体颜色，后期方便统一管理；*/
	color:$color;
    background: rgba(28, 118, 127, 0.16);
  [data-theme="theme1"] & {
    color:$font-color-theme;
    background: rgba(28, 118, 127, 0.16);
  }
  [data-theme="theme2"] & {
    color:$font-color-theme2;
    background: rgba(74, 119, 229, 0.16);
  }
}
@mixin element_font($color){/*通过该函数设置字体颜色，后期方便统一管理；*/
	color:$color;
  [data-theme="theme1"] & {
    color:$font-color-theme;
  }
  [data-theme="theme2"] & {
    color:$font-color-theme2;
  }
}
@mixin bg_color($color){/*通过该函数设置主题颜色，后期方便统一管理；*/
  background:$color;
  [data-theme="theme1"] & {
    background:$background-color-theme1;
  }
  [data-theme="theme2"] & {
    background:$background-color-theme2;
  }
  [data-theme="theme3"] & {
    background:$background-color-theme3;
  }
}
@mixin personnel_bg($color){
    background-color: $color;
    [data-theme = 'theme1'] &{
        background-color:$background-color-themesec;
    }
    [data-theme="theme2"] & {
        background-color: $background-color-theme2;
    }
}
@mixin active_bg($color){
    background: $color ;
    [data-theme = 'theme1'] &{
        background:$active-bg1 ;
    }
    [data-theme="theme2"] & {
        background: $active-bg2 ;
    }
}
@mixin active_btn($color){
    background: $active-btn1 ;
    [data-theme = 'theme1'] &{
        background:$active-btn1 ;
    }
    [data-theme="theme2"] & {
        background: $active-btn2 ;
    }
}
@mixin bg_img($color){
    background:$color;
  [data-theme="theme1"] & {
    background:$background-img;
    background-size: 100% 100%;
  }
  [data-theme="theme2"] & {
    background:$background-img1;
    background-size: 100% 100%;
  }
  background-size: 100% 100%;
}

@mixin display_type($type){
    display:$display-no;
    background: none;
    font-weight: bold;
    color: $font-color-theme;
    border-bottom: 3px solid $font-color-theme;
    [data-theme="theme1"] & {
        display:$display-no;
        background: none;
        font-weight: bold;
        color: $font-color-theme;
        border-bottom: 3px solid $font-color-theme;
    }
    [data-theme="theme2"] & {
        display:block;
        background:  rgba(35, 113, 182, 0.65);;
        color: $font-color-theme2;
        border-bottom: none !important;
    }
}

@mixin  img_black() {
    background-image: none;
    [data-theme="theme1"] & {
        background-image: none;
        background: linear-gradient(180deg, #FFFFFF 0%, #E1F3F5 100%);
    }
    [data-theme="theme2"] & {
        background-image: url("~@/assets/img/pageBg.png");
    }
}
@mixin  side_background() {
    background: #fff;
    [data-theme="theme1"] & {
        background: #fff
    }
    [data-theme="theme2"] & {
        background: none
    }
}
/*px转rem*/
@mixin px2rem($property,$px,$px2:false,$px3:false,$px4:false){
	$rem:75px;/* 设计稿尺寸/10 */
  @if $px and $px2 and $px3 and $px4 {
    #{$property}: ($px / $rem) + rem ($px2 / $rem) + rem ($px3 / $rem) + rem ($px4 / $rem) + rem;
  }
  @else if $px and $px2 {
		#{$property}: ($px / $rem) + rem ($px2 / $rem) + rem;
		//[data-model='pad'] & {#{$property}: ($px * 1.4 / $rem) + rem ($px2 * 1.4 / $rem) + rem;}
	}
	@else{
		#{$property}: ($px / $rem) + rem!important;
		//[data-model='pad'] & {#{$property}: ($px * 1.4 / $rem) + rem;}
	}
}
 
/*根据dpr计算font-size*/
@mixin font-dpr($font-size){
	font-size: $font-size;
	//[data-model="pad"] & { font-size: $font-size * 1.4; }
	[data-dpr="2"] & { font-size: $font-size * 2;}
	[data-dpr="3"] & { font-size: $font-size * 3;}
}
 
/*弹性盒属性*/
%flexbox{
	display: inline-flex;display: -webkit-flex;display: flex;
}
/*弹性盒比例*/
@mixin flex($num:1){
	-webkit-box-flex:$num;-moz-box-flex:$num;-webkit-flex:$num;-ms-flex:$num;flex:$num;
}
/*超行溢出显示省略号*/
@mixin overflow($num:1,$fontSize:0,$lineHeight:1.5){
  display: -webkit-box;-webkit-line-clamp:$num; overflow: hidden;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  @if $fontSize!=0 and $lineHeight{/*高度需要撑开*/
    line-height:$lineHeight;
    @if $lineHeight < 1.2 {
      line-height:1.2; /*最小需要1.2，否则在部分安卓机下第$num+1行会顶部漏出*/
    }
    height: $num * $fontSize * $lineHeight;
    [data-dpr="2"] & { height: $num * $fontSize * $lineHeight * 2!important;}
    [data-dpr="3"] & { height: $num * $fontSize * $lineHeight * 3!important;}
  }
}
 
//transition兼容写法
@mixin transition($content:all .2s){
  -moz-transition: $content;
  -webkit-transition: $content;
  -o-transition: $content;
  transition: $content;
}
//transfrom兼容
@mixin translateX($num:-50%){
  -ms-transform: translateX($num);
  -moz-transform: translateX($num);
  -webkit-transform: translateX($num);
  -o-transform: translateX($num);
  transform: translateX($num);
}
@mixin translateY($num:-50%){
  -ms-transform: translateY($num);
  -moz-transform: translateY($num);
  -webkit-transform: translateY($num);
  -o-transform: translateY($num);
  transform: translateY($num);
}
@mixin rotate($deg:90deg){
  -ms-transform:rotate($deg);
  -moz-transform:rotate($deg);
  -webkit-transform:rotate($deg);
  -o-transform:rotate($deg);
  transform:rotate($deg);
}